/* eslint-disable */
import { Button, Toast, Swiper, SwiperItem } from "mand-mobile";
import store from "@/tools/factory"
import QrcodeDecoder from 'qrcode-decoder';
import { TMap } from "../../tools/Tmap";
import config from "@/api/config"
import * as Request from '@/api/liubike';
import tools from "@/tools/index";
import simple from 'mand-mobile/components/swiper/demo/data/simple'
let that = null;

export default {
    name: "home",
    data() {
        return {
            isActive: 2,
            lat: config.latLng.lat,
            lng: config.latLng.lng,
            routerInfo: {},
            powerConfig: {},
            haveCar: true,
            polygon: null,
            polygonPoints: [],
            parkList: [],
            carList: [],
            btnStatus: 0,
            outFence: false,
            bno: null,
            parkIcon: null,
            carIcon: null,
            simple,
            adList: [],
            adShow: true,
            orderInfo: {},
            hasUnpayOrder: false
        };
    },
    components: {
        [Button.name]: Button,
        [Toast.name]: Toast,
        [Swiper.name]: Swiper,
        [SwiperItem.name]: SwiperItem
    },
    methods: {
        tabSelect(type) {
            this.isActive = type;
            this.initMarker()
        },
        clearEvent() {

        },
        getVehicle() {
            Request.getVehicle({
                customNo: this.bno,
                outFence: that.routerInfo.outFence,
                event: "scan"
            }).then(res => {
                store.set("carInfo", res);
                this.$router.push({ name: 'readyUnlock' })
            })
        },
        getBannerInfo() {
            Request.getBannerInfo({ areaId: this.routerInfo.areaId }).then(res => {
                if (res.success) {
                }
            })
        },
        goPayOrder() {
            this.$router.push({
                name: "payOrder"
            })
        },
        getHasUnsettlementOrder() {
            Request.getHasUnsettlementOrder().then(res => {
                if (res.success) {
                    that.hasUnpayOrder = true;
                } else {
                    that.hasUnpayOrder = false;
                }
            })
        },
        getAd() {
            Request.getAdTips({
                lat: this.lat, lng: this.lng
            }).then(res => {
                if (res.success) {
                    that.adList = res.data;
                    if (that.adList && that.adList.length > 0 && Object.keys(that.orderInfo).length === 0) {
                        that.adShow = true
                    } else {
                        that.adShow = false
                    }
                }
            })
        },
        closeModel() {
            this.adShow = false
        },
        drawFence() {
            let path = [];
            if (this.routerInfo.polygonPonits == this.polygonPoints) {
                return false
            }
            this.polygonPoints = this.routerInfo.polygonPonits
            if (!this.polygonPoints || this.polygonPoints.length == 0) {
                return false
            }
            if (this.polygon) {
                this.polygon.setMap(null);
            }
            this.polygonPoints.map(item => {
                path.push(new qq.maps.LatLng(item.lat, item.lng))
            })
            path.push(new qq.maps.LatLng(that.polygonPoints[0].lat, that.polygonPoints[0].lng))
            //初始化polygon
            this.polygon = new qq.maps.Polygon({
                //多边形的填充色，可通过Color对象的alpha属性设置透明度。
                fillColor: new qq.maps.Color(0, 0, 0, 0),
                //fillColor: new qq.maps.Color(0, 0, 0, 0.5),
                //要显示多边形的地图。
                map: that.map,
                //多边形的路径，以经纬度坐标数组构成。
                path: path,
                //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
                strokeColor: '#ff6e2a',
                //多边形的边框样式。实线是solid，虚线是dash。
                strokeDashStyle: 'dash',
                //多边形的边框线宽。
                strokeWeight: 5,
                //多边形是否可见。
                visible: true,
                //多边形的zIndex值。
                zIndex: 1000
            });
        },
        getVehicleList() {
            Request.getApiVhicle({
                lat: this.lat,
                lng: this.lng,
                coord: 0
            }).then(res => {
                if (that.carList.length > 0) {
                    that.carList.map(item => {
                        item.setMap(null)
                    })
                }
                if (!res) {
                    return false
                }
                if (res.length == 0) {
                    that.haveCar = false
                    return false
                }
                that.haveCar = true
                res.map(item => {
                    //创建一个Marker
                    let marker = new qq.maps.Marker({
                        position: new qq.maps.LatLng(item.coordinate.lat, item.coordinate.lng),
                        map: that.map,
                        icon: that.carIcon
                    });
                    qq.maps.event.addListener(marker, 'click', function () {
                    })
                    that.carList.push(marker)
                })
            })
        },
        getParkingSpot() {
            Request.getParkingspot({
                lat: this.lat,
                lng: this.lng,
                coord: 0,
            }).then(res => {
                if (that.parkList.length > 0) {
                    that.parkList.map(item => {
                        item.setMap(null);
                    })
                    that.parkList = [];
                }
                //添加标记
                if (res.length == 0) {
                    return false
                }
                res.map(item => {
                    //创建一个Marker
                    let marker = new qq.maps.Marker({
                        position: new qq.maps.LatLng(item.coordinate.lat, item.coordinate.lng),
                        map: that.map,
                        icon: that.parkIcon
                    });
                    qq.maps.event.addListener(marker, 'click', function () {
                    })
                    that.parkList.push(marker)
                })
            })
        },
        scan() {
            this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
        },
        getUrl(type) {
            let elem = document.getElementById('file');
            let qr = new QrcodeDecoder();
            let url = null;
            if (type === 'img-url') {
                url = elem.src;
            } else if (type === 'file-url' && elem.files.length > 0) {
                url = tools.getObjectURL(elem.files[0]);
            }
            qr.decodeFromImage(url).then((res) => {
                let options = tools.getOptions(res.data);
                that.bno = options['bno'];
                that.getVehicle()
            });
        },
        initData() {
            if (store.get("token")) {
                that.getUserOrder(function () {
                    that.getBannerInfo();
                    that.getAd();
                    that.getHasUnsettlementOrder()
                });
            }
            that.getPowerConfig();
        },
        getUserOrder(fn) {
            Request.getUserOrder().then(res => {
                if (res.success) {
                    that.orderInfo = res.data;
                } else {

                }
                fn && fn()
            })
        },
        getPowerConfig() {
            Request.getPowerConfig().then(res => {
                if (res.success) {
                    let req = res.data;
                    if (req) {
                        this.powerConfig = req;
                        store.set("powerConfig", req);
                    }
                } else {
                    Toast.info(res.msg)
                }
            })
        },
        getRouter(fn, errFn) {
            Request.getRouter({
                lat: this.lat,
                lng: this.lng,
                relocated: false
            }).then(res => {
                that.routerInfo = {
                    bikeBaseUrl: res.data || "",
                    polygonPonits: res.point || "",
                    areaId: res.areaid || "",
                    cityRegion: res.cityRegion || "",
                    outFence: res.success,
                    wsUrl: res.wsUrl || "",
                    userRouter: res.userRouter || ""
                };
                store.set("routerInfo", that.routerInfo)
                if (res.success) {
                    fn && fn()
                } else {
                    errFn && errFn()
                }
            })
        },
        initMarker() {
            if (that.parkList.length > 0) {
                that.parkList.map(item => {
                    item.setMap(null)
                })
            }
            if (that.carList.length > 0) {
                that.carList.map(item => {
                    item.setMap(null)
                })
            }
            this.getRouter(function () {
                that.drawFence();
                if (that.isActive == 1) {
                    that.getVehicleList();
                } else {
                    that.haveCar = true
                    that.getParkingSpot();
                }
            })
        },
        markerStyle() {
            // 车辆图标
            let carAnchor = new qq.maps.Point(0, 22),
                carSize = new qq.maps.Size(38, 44),
                carOrigin = new qq.maps.Point(0, 0),
                carScaleSize = new qq.maps.Size(38, 44),
                carIcon = new qq.maps.MarkerImage(
                    require("../../images/available@2x4.png"),
                    carSize,
                    carOrigin,
                    carAnchor,
                    carScaleSize
                );
            this.carIcon = carIcon
            // 停车点图标
            let anchorB = new qq.maps.Point(0, 25),
                sizeB = new qq.maps.Size(35, 51),
                originB = new qq.maps.Point(0, 0),
                scaleSizeB = new qq.maps.Size(35, 51),
                iconB = new qq.maps.MarkerImage(
                    require("../../images/icon_parking_spot@2x.png"),
                    sizeB,
                    originB,
                    anchorB,
                    scaleSizeB
                );
            this.parkIcon = iconB;
        },
        initMap() {
            //定义地图中心点坐标
            TMap().then(qq => {
                let center = new qq.maps.LatLng(config.latLng.lat, config.latLng.lng);
                store.set("lat", config.latLng.lat);
                store.set("lng", config.latLng.lng);
                that.map = new qq.maps.Map(document.getElementById("container"), {
                    // 地图的中心地理坐标。
                    center: center,
                    zoom: 18,
                    mapTypeControl: false,
                    panControl: false,
                    zoomControl: false,
                    scaleControl: false
                });
                // 重置所有marker
                that.markerStyle();
                that.initMarker();
                that.initData();
                //当可视区域范围更改时会触发此事件。返回当前地图的视野范围。
                qq.maps.event.addListener(that.map, 'dragend', function () {
                    let latLng = that.map.getCenter();
                    that.lat = latLng.lat;
                    that.lng = latLng.lng;
                    // 重置所有marker
                    that.initMarker();
                });
            });
        },
    },
    created() {
        this.initMap();
        if (store.get("token")) {
            this.btnStatus = 1
        }
    },
    mounted() {
        that = this;
    }
};